<template>
	<div class="home">
		<header class="fixedTop">
			<HeaderNav></HeaderNav>
		</header>
		<main>
			<section class="sectionVideo">
				<div class="videoMedia">
					<video muted="" autoplay="" loop="" playsinline="" preload="auto">
						<source src="https://www.shapespark.com/v104/img/shapespark-lead-30_1.mp4" type="video/mp4">
						<source src="https://www.shapespark.com/v104/img/shapespark-lead-btrate1.mp4" media="all and (max-width: 767px)"
						 type="video/mp4">
					</video>
				</div>
				<div class="videoDes container">
					<div class="videoText">
						<h1>Real-time rendering in a browser </h1>
						<p>Turn architectural 3D models into online walkthroughs</p>
						<a class="btn btnPrimary" href="">Start</a>
						<span class=videoInfo>Courtesy of build | Architektur-Visualisierung</span>
					</div>

				</div>
			</section>
			<section class="sectionArch">
				<div class="container">
					<div class="archHeader">
						<h2 class="archTitle">A communication and marketing tool for architecture</h2>
						<p class="archSubtitle">
							Architects, designers and archviz
							professionals use Shapespark to easily present designs and
							to create realistic visualizations for real-estate
							marketing projects.
						</p>
					</div>
					<ul class="archList">
						<li class="item">
							<div class="itemIcon device"></div>
							<h4 class="itemTitle">Easily share on desktop, mobile and VR</h4>
							<p class="itemText">Simply send a link or embed the walkthrough in a
								website - clients can explore the design on any device
								without the need for a meeting.</p>
						</li>
						<li class="item">
							<div class="itemIcon interactive"></div>
							<h4 class="itemTitle">Easily share on desktop, mobile and VR</h4>
							<p class="itemText">Simply send a link or embed the walkthrough in a
								website - clients can explore the design on any device
								without the need for a meeting.</p>
						</li>
						<li class="item">
							<div class="itemIcon 3d"></div>
							<h4 class="itemTitle">Easily share on desktop, mobile and VR</h4>
							<p class="itemText">Simply send a link or embed the walkthrough in a
								website - clients can explore the design on any device
								without the need for a meeting.</p>
						</li>
					</ul>
				</div>
				<div class="bubble1"></div>
				<div class="bubble2"></div>
			</section>
			<section class="sectionBanner">
				<div class="container">
					<h2 class="bannerTitle">See how customers use Shapespark</h2>
					<div class="sliderNav">
						<button type="button" class="slickArrow slickPrev"><i class="iconLeft">上</i></button>
						<button type="button" class="slickArrow slickNext"><i class="iconRight">下</i></button>
					</div>
				</div>
				<div class="slider">
					<ul class="bannerList">
						<li>
							<img src="https://www.shapespark.com/v104/img/portfolio/walkthishouse/tile.jpg" alt="">
						</li>
					
					</ul>
				</div>
			</section>
		</main>
		<footer>

		</footer>
	</div>
</template>

<script>
	// @ is an alias to /src
	import HeaderNav from '@/components/HeaderNav.vue';

	export default {
		name: 'Home',
		components: {
			HeaderNav
		}
	}
</script>
<style scoped lang="scss">
	header.fixedTop {
		height: 75px;
		background: #fff;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25);
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
	}

	main {
		margin-top: 75px;

		.sectionVideo {
			height: 730px;
			position: relative;
			overflow: hidden;

			.videoMedia {
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: -1;
				overflow: hidden;

				video {
					width: auto;
					height: auto;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.videoMedia::before {
				content: '';
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url("../assets/pattern-video.png");
			}

			.videoDes {
				width: 1140px;
				height: 100%;
				padding: 0 15px;
				display: flex;
				align-items: center;

				.videoText {
					width: 520px;
					text-align: left;
					color: #fff;

					h1 {

						font-size: 54px;
						font-weight: 400;
						line-height: 1.25;
						margin-bottom: 1rem;
					}

					p {
						font-size: 20px;
						line-height: 1.5;
						margin-bottom: 3rem;
					}

					a.btnPrimary {
						display: inline-block;
						color: #fff;
						cursor: pointer;
						font-size: 24px;
						padding: 1.6rem 2.5rem;
						border-color: #0c87f2;
						background-color: #0c87f2;
						border-radius: .4rem;
					}

					span.videoInfo {
						position: absolute;
						bottom: 10px;
						right: 10px;
						font-size: 11px;
						color: rgba(255, 255, 255, .5);
					}
				}
			}
		}

		.sectionArch {
			position: relative;
			padding: 140px 0;

			.container {
				padding: 0 15px;
				text-align: center;

				.archHeader {
					padding-bottom: 4rem;
					font-weight: 400;

					.archTitle {
						font-size: 40px;
						color: #253858;
						line-height: 1.1;
						margin-bottom: 1rem;
					}

					.archSubtitle {
						font-size: 20px;
						line-height: 1.5;
						margin-bottom: 3rem;

					}
				}

				.archList {
					height: 320px;
					display: flex;
					justify-content: space-between;

					li.item {
						padding: 0 15px;
						font-weight: 400;
						text-align: center;

						.itemIcon {
							width: 124px;
							height: 124px;
							background: url("../assets/sprite.png") -116px -464px no-repeat;
							margin: 0 auto 2rem;
						}

						.interactive {
							background: url("../assets/sprite.png") -374px -464px no-repeat;
						}

						.3d {
							background: url("../assets/sprite.png") -245px -464px no-repeat;
						}

						.itemTitle {
							font-size: 24px;
							color: #253858;
							line-height: 1.2;
							margin-bottom: 1.5rem;
						}

						.itemText {
							color: #696d75;
							margin-bottom: 1rem;
							line-height: 1.5;
						}
					}
				}
			}

			.bubble1 {
				width: 111px;
				height: 222px;
				background: url("../assets/sprite.png") 0 -464px no-repeat;
				position: absolute;
				top: 146px;
				right: 0;
				z-index: -1;
			}

			.bubble2 {
				width: 209px;
				height: 288px;
				background: url("../assets/sprite.png") -588px 0 no-repeat;
				position: absolute;
				top: 438px;
				left: 0;
				z-index: -1;
			}

		}

		.sectionBanner {
			.container {
				padding: 0 15px;
				margin-bottom: 4rem;
				.bannerTitle {
					display: inline-block;
					width: calc(100% - 75px);
					font-size: 42px;
					font-weight: 400;
					line-height: 1.2;
					text-align: left;
					color: #253858;
					margin-bottom: 1rem;
				}

				.sliderNav {
					display: inline-block;
					vertical-align: top;

					button {
						cursor: pointer;
						font-size: 20px;
						color: #0c87f2;
						padding: .5rem;	
						.iconLeft{
							
						}
						.iconRight{
							
						}
					}
				}
			}
			.slider{
				height: 495px;
				overflow: hidden;
				.bannerList{
					height: 100%;
					display: -webkit-box;
					overflow-x: scroll;
					.bannerItem{
						width: 525px;
						height: 100%;
						margin: 0 1.5rem;
						float: left;
					}
				}
			}
		}

	}
</style>
